<html lang="en">
<head>
    <link rel="stylesheet" href="./uikit/uikit-2.25.0/css/uikit.min.css" />
    <script src="./jquery/jquery-3.1.1.min.js"></script>
    <script src="./uikit/uikit-2.25.0/js/uikit.min.js"></script>
    <script src="./vue/2.0/vue.min.js"></script>
</head>
<body>
    <!-- uk-container, uk-margin-large-top, uk-grid, uk-width-1-3 在 ./l2_layout_navbar_right_footer.html 中有 -->
    <!-- .uk-width-1-1 填满可见宽度的 100％, 下面的 input 输入框默认不是 block 元素, 不会填充父元素 -->
    <!-- .uk-width-*-* 只针对上一级父标签 -->

    <!-- .uk-form 类到表单元素中, 所有表单控件都被并排放置在一行 -->
    <!-- .uk-form-stacked 类使 label 标签显示在控件上方 -->
    <!-- .uk-alert 类至块元素中, 为成功、警告和错误信息定义样式 -->
    <!-- .uk-alert-danger class, to indicate an important message -->
    <!-- .uk-hidden	在所有设备上隐藏该元素 -->
    <!-- .uk-form-row 用来放置表单控件 -->
    <!-- .uk-form-label Label 必须添加该类, 并把相应的空间放置在带有 .uk-form-controls 类的容器中 -->
    <!-- .uk-button 要应用这个组件, 在一个 <a> 或 <button> 元素中添加即可 -->
    <!-- .uk-button-primary 着重强调在一系列按钮中的重要性, 蓝色按钮 -->
    <div class="uk-container uk-container-center uk-margin-large-top">
        <div class="uk-grid">
            <div class="uk-width-1-3">
                <h1>欢迎注册！</h1>
                <form id="vm" v-on="submit: submit" class="uk-form uk-form-stacked">
                    <div class="uk-alert uk-alert-danger uk-hidden"></div>
                    <div class="uk-form-row">
                        <label class="uk-form-label">名字:</label>  <!-- label 可以加 for 来指向 input -->
                        <div class="uk-form-controls">
                            <input v-model="name" type="text" maxlength="50" placeholder="名字" class="uk-width-1-1">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label">电子邮件:</label>
                        <div class="uk-form-controls">
                            <input v-model="email" type="text" maxlength="50" placeholder="your-name@example.com" class="uk-width-1-1">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label">输入口令:</label>
                        <div class="uk-form-controls">
                            <input v-model="password1" type="password" maxlength="50" placeholder="输入口令" class="uk-width-1-1">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <label class="uk-form-label">重复口令:</label>
                        <div class="uk-form-controls">
                            <input v-model="password2" type="password" maxlength="50" placeholder="重复口令" class="uk-width-1-1">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-user"></i> 注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        function validateEmail(email) {
            var re = /^[a-z0-9\.\-\_]+\@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+){1,4}$/;
            return re.test(email.toLowerCase());
        }
        $(function() {
            var vm = new Vue({
                // el: '#vm',  // 加上这句话就显示不出来了, 所以注释掉了, vue 的功能也就不能用了, 看看吧, 反正学的是 uikit
                data: {
                    name: '',
                    email: '',
                    password1: '',
                    password2: ''
                },
                methods: {
                    submit: function(event) {
                        event.preventDefault();
                        var $form = $('#vm');
                        if (!this.name.trim()) {
                            return $form.showFormError('请输入名字');
                        }
                        if (!validateEmail(this.email.trim().toLowerCase())) {
                            return $form.showFormError('请输入正确的Email地址');
                        }
                        if (this.password1.length < 6) {
                            return $form.showFormError('口令长度至少为6个字符');
                        }
                        if (this.password1 !== this.password2) {
                            return $form.showFormError('两次输入的口令不一致');
                        }
                        var email = this.email.trim().toLowerCase();
                        $form.postJSON('/api/users', {
                            name: this.name.trim(),
                            email: email,
                            passwd: CryptoJS.SHA1(email + ':' + this.password1).toString()
                        }, function(err, r) {
                            if (err) {
                                return $form.showFormError(err);
                            }
                            return location.assign('/');
                        });
                    }
                }
            });
            $('#vm').show();
        });
    </script>
</body>
</html>
